<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
		<script src="./lib/jquery.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>
		<button id="action">触发行为</button>
		<button id="clear">clear</button>
		<button id="reset">setOption</button>
		<button id="dispose">dispose</button>

		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector('div'));
			let pieData = [
				{
					name: '淘宝',
					value: 11231,
				},
				{
					name: '京东',
					value: 22673,
				},
				{
					name: '唯品会',
					value: 6123,
				},
				{
					name: '1号店',
					value: 8989,
				},
				{
					name: '聚美优品',
					value: 6700,
				},
			];
			let option = {
				legend: {
					data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品'],
				},
				title: {
					text: '免疫力',
					textStyle: {
						color: 'blue',
					},
				},
				series: [
					{
						type: 'pie',
						data: pieData,
					},
				],
			};
			mCharts.setOption(option);
			// on/off 方法，用来绑定/解绑事件处理函数
			mCharts.on('click', function (arg) {
				console.log(arg);
				console.log('click...');
			}); //对事件进行监听

			mCharts.off('click'); //取消事件

			mCharts.on('legendselectchanged', function (arg) {
				console.log(arg);
				console.log('legend...');
			});
			$('#action').click(function () {
				mCharts.dispatchAction({
					type: 'highlight', //事件类型
					seriesIndex: 0, //图表索引
					dataIndex: 1, //图表中哪一项
				});
				mCharts.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: 2,
				});
			});

			$('#clear').click(function () {
				//清空图表实例对象
				mCharts.clear();
			});

			$('#reset').click(function () {
				//重新设置图表实例
				mCharts.setOption(option);
			});

			$('#dispose').click(function () {
				//销毁图表实例
				mCharts.dispose();
			});
		</script>
	</body>
</html>
